<template recyclable>
    <div class="card-wrapper" >
        <div class="task-head">
           <div class="task-title">
               <text class="task-icon">作</text>
               <text class="teak-name">{{itemValue.ex.name}}</text>
           </div>
            <text class="task-status" v-if="itemValue.ex.status === 'ready' ">未开始</text>
            <text class="task-status" v-if="itemValue.ex.status === 'complete' ">已提交</text>
            <text class="task-status" v-if="itemValue.ex.status === 'pigai' ">已批改</text>
        </div>
        <div class="task-bottom">
            <div  v-if="itemValue.ex.status === 'pigai'" @click="onCardClick">
                <text class="task-check" >查看解析</text>
            </div>
            <div v-else ></div>
            <div   v-if="itemValue.ex.status === 'ready'" @click="onCardClick">
                <text class="task-link" :style="{fontFamily: 'wxcIconFont'}" >去练习 {{'\ue618'}}</text>
            </div>
            <div v-if="itemValue.ex.status === 'pigai'">
                <text   class="task-number">
                    {{itemValue.ex.score}}
                </text>
            </div>

        </div>
    </div>
</template>

<script>
  export default {
    props: {
      itemValue: {
        type: Object, default: () => {
          return {ex:{}}
        }
      },
      itemIndex: {type: Number, default: -1},
      onItemClick:{type:Function}
    },
    components: {},
    methods: {
      onCardClick() {
        this.onItemClick && this.onItemClick(this.itemIndex);
      }
    },
    data() {
      return {}
    }
  }
</script>
<style scoped lang="scss" >
    @import '../../config/styles.scss';
    .card-wrapper {
        width: 750px;
        height:190px;
        background-color: white;
        box-shadow: $--box-shadow-color;
    }
    .task-head{
        width: 700px;
        height:80px;
        flex-direction: row;
        align-items:center;
        justify-content: space-between;
    }
    .task-bottom{
        width: 750px;
        height:110px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .task-title{
        flex-direction: row;
        align-items: flex-end;
    }
    .task-icon{
        background-color:#00BB9A;
        color:#ffffff;
        width:32px;
        font-size:24px;
        height:32px;
        border-radius:8px;
        margin-left:20px;
        margin-right:20px;
        margin-bottom:5px;
        text-align: center;
    }
    .teak-name{
        font-size:36px;
        color:#434A54;
    }
    .task-status{
        font-size:24px;
        color:#999999;
    }
    .task-check{
        color:#00BB9A;
        font-size:24px;
        margin-left:75px;
    }
    .task-link{
        font-size:24px;
        color:#00BB9A;
        margin-right:30px;
    }
    .task-number{
        color:#FE0000;
        font-size:48px;
        margin-right:40px;
    }
</style>
